<template>
  <div class='g-content-wrapper'>
    <header-top>数据解盘</header-top>
    <div class="g-content" ref="content">
      <stock-index></stock-index>
      <div class="interval" id="interval"></div><!--间隔-->
      <tab-line :tab-line="menuTabLine" :on-selected="onLineSelected" :select-index="msgLine"></tab-line>
      <change-distri v-if="msgLine == 0"></change-distri>
      <capital v-else-if="msgLine == 1"></capital>
      <market v-else></market>
      <div class="interval"></div><!--间隔-->
      <div class='comment'>
        <h1 class='comment-title'>数据解盘</h1>
        <p>1.什么是数据解盘？<br/>
        数据解盘的本质是大量能够反映大盘走势的数据汇总。<br/>
        我们将过去零散甚至缺失的数据集中起来，用图表形式展示，并对这些数据进行多个角度的比较和分析。<br/>
        2.数据解盘有什么用？<br/>
        如果你是专业投资者，你可以从数据中较直观地判断当前大盘的方向和强弱。<br/>
        如果你想成为专业投资者，你可以从这里开始学习如何看大盘，我们提供数据，也对部分数据进行解释说明。
        </p>
      </div>
      <div class="prompt">
        本终端所载数据仅供参考，数据统计口径采用平台自身标准，不构成投资建议。
      </div>
    </div>
    <opinion-bar></opinion-bar>
  </div>
</template>

<script>
import headerTop from '@/components/common/HeaderTop'
import tabLine from '@/components/common/TabLine'
import stockIndex from './children/StockIndex'
import changeDistri from './children/ChangeDistri'
import opinionBar from './children/OpinionBar'
import capital from './children/Capital'
import market from './children/Market.vue'
// import topSearch from '@/components/topSearch/TopSearch'
export default {
  name: 'index',
  data () {
    return {
      menuTabLine: [{name: '涨跌分布'}, {name: '资金动态'}, {name: '市场人气'}],
      msgLine: 0,
      title: '数据解盘'
    }
  },
  components: {
    headerTop,
    stockIndex,
    changeDistri,
    tabLine,
    opinionBar,
    capital,
    // topSearch
    market
  },
  methods: {
    onLineSelected (index) {
      this.msgLine = index;
      this.$store.dispatch('choseTabLine', index);
    }
  },
  created () {
    this.msgLine = this.$store.state.tabLineMsg;
  },
  activated() {
    this.$refs.content.scrollTop = this.$store.getters.getScrollHeight;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
  .g-content-wrapper {
    z-index: 10000000;
  }
  .prompt{
    box-sizing: border-box;
    height:0.67rem;
    font-size:0.12rem;
    padding: 0.15rem 0.2rem 0 0.2rem;
    background: #f0f0f0;
    color: #999999;
    text-align: left;
    /*display: table-cell;*/
    /*vertical-align: middle;*/
    margin-bottom: 0.945rem;
  }
</style>
